<template>
  <div>
    <button @click="isShow = !isShow">切换</button>
    <!-- 
       使用第三方动画库 animate.css
         1.下载包  npm i animate.css
         2.入口文件引入  import 'animate.css'
         3.给需要执行动画的元素添加类：animate__animated
         4.给需要执行动画的元素的外层transition添加两个属性
           1.enter-active-class：进入时要执行的动画animate__xxx
           2.leave-active-class：离开时要执行的动画animate__xxx
     -->
    <transition
      enter-active-class="animate__lightSpeedInRight"
      leave-active-class="animate__lightSpeedOutLeft"
    >
      <div v-if="isShow" class="box animate__animated"></div>
    </transition>
  </div>
</template>
<script>
export default {
  name: 'App',
  data() {
    return {
      isShow: true,
    };
  },
};
</script>
<style scoped>
.box {
  width: 300px;
  height: 300px;
  background: orange;
}
</style>
